import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import commonjs from 'vite-plugin-commonjs';
import path from 'path';

export default defineConfig({
  plugins: [
    commonjs(),
    vue(),
    viteCompression({
      algorithm: 'gzip', // 使用 gzip 压缩
      ext: '.gz', // 生成的文件扩展名
      threshold: 10240, // 只有大于该值的资源才会被压缩，单位为字节 10 KB
      deleteOriginFile: true, // 是否删除原始文件
    }),
  ],
  server: {
    proxy: {
      '/api': {
        target: process.env.VITE_API_BASE_URL, // 使用环境变量
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 将 /api 去除
        secure: false, // 忽略 SSL 验证
      }
    },
    hmr: true,  // 确保 HMR 被启用
    middlewareMode: false, //关闭开发服务器的缓存
    open: false, // 自动打开浏览器
    host: '0.0.0.0', // 或者直接使用你的本地 IP 地址，例如 '192.168.1.100'
    port: 3000, // 你希望使用的端口号
    strictPort: true, // 如果指定端口被占用，则退出
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // 设置别名 @ 指向 src 目录
      // '@components': resolve(__dirname, 'src/components'), // 示例：指向 components 目录
      // '@assets': resolve(__dirname, 'src/assets'), // 示例：指向 assets 目录
    }
  },
  build: {
    outDir: 'dist', // 输出目录
    assetsDir: 'assets', // 静态资源目录（相对于outDir）
    sourcemap: false, // 生产环境下关闭 source map
    cssCodeSplit: true, // 启用 CSS 代码分割
    minify: 'terser', // 使用 terser 进行压缩
    assetsInlineLimit: 4096, // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项。
    terserOptions: {
      compress: {
        drop_console: true,// 生产环境下去除console
        drop_debugger: true,// 生产环境下去除debugger
      }
    },
    rollupOptions: {
      output: {
        entryFileNames: 'system/assets/[name].[hash].js',
        chunkFileNames: 'system/assets/[name].[hash].js',
        assetFileNames: 'system/assets/[name].[hash].[ext]',
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          api: 'modern-compiler', // or 'modern'
        },
      },
    },
  },
});
